import { AbstractImage, AbstractSlider, AbstractVideo } from "@/components";
import { ImageStringFormat, VideoStringFormat } from "@/data/shared/mediaTypes";
import { View } from "@tarojs/components";
import style from "./index.module.scss";
import { rpxToPx } from "@/utils";
import { SIDE_MARGIN_RPX } from "@/data/constants";
import { useDeviceInfo } from "@/store/deviceContext";

interface HeroSlideBannerProps {
  images: ImageStringFormat[];
  videoSrc: VideoStringFormat | null;
  themeColor: string;
}

const C06HeroSlideBanner = ({
  images,
  videoSrc,
  themeColor,
}: HeroSlideBannerProps) => {
  const { windowWidth } = useDeviceInfo().deviceInfoState;

  const marginActual = rpxToPx(SIDE_MARGIN_RPX, windowWidth);

  return (
    <View className={style["hero-slide-wrapper"]}>
      <AbstractSlider type="hero" themeColor={themeColor}>
        {videoSrc && (
          <AbstractVideo className={style["slider-card"]} src={videoSrc} />
        )}
        {images.map((heroImage) => {
          return (
            <AbstractImage
              key={heroImage}
              src={heroImage}
              type="none"
              className={style["slider-card"]}
              style={{
                width: windowWidth - 2 * marginActual,
              }}
            />
          );
        })}
      </AbstractSlider>
    </View>
  );
};

export default C06HeroSlideBanner;
